import React, { useMemo } from "react";
import { useState, useEffect } from "react";
import axios from "axios";
import Item from "./Item";
import { Card, Radio, Tag, Button } from "@nutui/nutui-react";
import "./Cart.css";
import { useNavigate } from "react-router-dom";
export default function Cart() {
  const navigate = useNavigate();
  const [cart, setCart] = useState([]);
  const [users, setUsers] = useState([]);
  const [radios, setRadios] = useState([]);

  const getCartList = () => {
    axios
      .get(
        "http://localhost:3000/zlp/cart?user=" +
          JSON.parse(localStorage.getItem("user"))
      )
      .then((res) => {
        // console.log(res.data.info);
        setCart(res.data.info);
        setUsers(res.data.userList);
      });
  };
  useEffect(() => {
    getCartList();
  }, []);
  const handleRadioChange = (id) => {
    if (radios.find((i) => i == id)) {
      let copyRadios = [...radios];
      const index = copyRadios.indexOf(id);
      copyRadios.splice(index, 1);
      setRadios(copyRadios);
    } else {
      let copyRadios = [...radios];
      copyRadios.push(id);
      setRadios(copyRadios);
    }
  };
  const cart1 = useMemo(() => {
    return cart.filter((i) => i.state == 0);
  }, [cart]);
  const getPrice = useMemo(() => {
    let price = 0;
    cart1.forEach((item) => {
      if (radios.find((i) => i == item.cart_id._id)) {
        price += item.cart_id.price;
      }
    });
    return price;
  }, [radios]);
  console.log(radios);

  return (
    <div>
      {cart1.map((item) => {
        return (
          <Item
            item={item}
            users={users}
            handleRadioChange={handleRadioChange}
            radios={radios}
          ></Item>
        );
      })}
      <div
        style={{
          position: "absolute",
          bottom: "40px",
          lineHeight: "80px",
          backgroundColor: "#ffffff",
          display: "flex",
          justifyContent: "space-between",
          width: "100%",
          boxSizing: "border-box",
          paddingLeft: "10px",
          paddingRight: "20px",
          alignItems: "center",
        }}
      >
        <span>
          <span style={{ marginRight: "10px", fontSize: "20px" }}>
            <input
              type="checkbox"
              checked={radios.length == cart1.length ? true : false}
              onChange={() => {
                if (radios.length == cart1.length) {
                  setRadios([]);
                  return;
                }

                const copyRadios = [...radios];
                cart1.forEach((item) => {
                  if (!radios.find((i) => i == item.cart_id._id)) {
                    copyRadios.push(item.cart_id._id);
                  }
                  setRadios(copyRadios);
                });
              }}
            />
            全选
          </span>
          <span style={{ fontSize: "20px" }}>合计:</span>
          <span style={{ color: "red", fontSize: "20px" }}>
            ￥{getPrice.toFixed(2)}
          </span>
        </span>
        <Button
          style={{
            backgroundColor: "#fe9e70",
            color: "#fff",
            fontSize: "20px",
          }}
          onClick={() => {
            //   axios
            //     .post("http://localhost:3000/zlp/pay", {
            //       name: "123",
            //       orderId: "买个1西瓜7718",
            //       price: getPrice,
            //     })
            //     .then((res) => {
            //       window.location.href = res.data.paymentUrl;
            //     });
            navigate(`/dingdan?price=${getPrice}&producks=${radios}`);
          }}
        >
          去结算
        </Button>
      </div>
    </div>
  );
}
